<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Algolia Experiences demo</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite.min.css"
    />
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
          sans-serif;
      }
      main {
        max-width: 80em;
        margin: 0 auto;
      }
      .ais-Hits-list,
      .ais-TrendingItems-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1em;
      }
      .ais-TrendingItems-item,
      .ais-Hits-item {
        padding: 0;
      }
      .ais-TrendingItems-item a,
      .ais-Hits-item a {
        width: 100%;
        padding: 1.5em;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
      }
      .ais-TrendingItems-item img,
      .ais-Hits-item img {
        width: 100%;
        height: 10em;
        border-radius: 4px;
        object-fit: contain;
      }
      .__flex {
        display: flex;
        gap: 1em;
        justify-content: space-between;
      }
      .__bold {
        font-weight: bold;
      }
      div:has(> .ais-Pagination) {
        display: flex;
      }
      .ais-Pagination {
        margin: 1em auto;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/algolia-experiences@1/dist/algolia-experiences.production.min.js"></script>
    <meta
      name="algolia-configuration"
      content='{"appId":"F4T6CUV2AH","apiKey":"72d500963987bc97ff899d350a00f7a8"}'
    />
  </head>
  <body>
    <main>
      <h2>Buy historical books now!</h2>
      <algolia-experience
        experience-id="category:historical"
      ></algolia-experience>
    </main>
  </body>
</html>
